<template>
  <div class="proup" id="inputPP">
    <div class="ptem">
      <div class="i2d6">表格类型</div>
      <div class="i4d6">
        <el-select v-model="rel.property.table.type" placeholder="请选择">
          <el-option
            v-for="item in compOptions"
            :label="item.label"
            :value="item.value"
            :key="item.value">
          </el-option>
        </el-select>  
      </div>
    </div>
    <v-probox-common v-model="rel.property" :tips="false"></v-probox-common>
    <div class="ptem">
      <div class="i3d6">
        <strong>题目内容</strong>
      </div>
      <div class="i3d6 tar">
        <a class="" v-on:click="multi_click('row')">批量编辑</a>
      </div>
    </div>
    <v-probox-option-editor v-model="rel.property.table.rows"></v-probox-option-editor>
    <div class="ptem">
      <div class="i3d6">
        <strong>选项内容</strong>
      </div>
      <div class="i3d6 tar">
        <a class="" v-on:click="multi_click('col')">批量编辑</a>
      </div>
    </div>
    <v-probox-option-editor v-model="rel.property.table.cols"></v-probox-option-editor>
    <v-probox-multi-option-editor :optionValue="optionValue" :show="showMultiEditor" v-on:close-editor="closeEditor" v-on:say-options="sayOptions"></v-probox-multi-option-editor>
    <hr>
    <div class="ptem" v-show="rel.component!='v-table-top'">
      <div class="i2d6">
        <strong>题目宽度</strong>
      </div>
      <div class="i4d6">
         <el-input-number  size="mini" v-model="rel.property.table.titleWidth" :min="10" :max="50"></el-input-number>
      </div>
    </div>
      
    
  </div>
</template>

<script>
import proboxCommon from './libs/pro-box-common'
import proboxOptionEditor from './libs/pro-box-option-editor'
import proboxMultiOptionEditor from './libs/pro-box-multi-editor'
export default{
  props:["rel"],
  data:function(){
    return {
      showMultiEditor:false,
      editType:'',
      optionValue:'',
      compOptions:[{
        value: 'radio',
        label: '表格单选'
      },{
        value: 'checkbox',
        label: '表格多选'
      },{
        value: 'input',
        label: '表格填写'
      }]
    }
  },
  components:{
    'v-probox-common':proboxCommon,
    'v-probox-option-editor':proboxOptionEditor,
    'v-probox-multi-option-editor':proboxMultiOptionEditor
  },
  methods:{
    sayOptions:function(options){
      if(this.editType=='row'){
        this.rel.property.table.rows=options;
      }else{
        this.rel.property.table.cols=options;
      }
    },
    closeEditor:function(close){
      this.showMultiEditor=close
    },
    multi_click:function(type){
      
      this.optionValue = ''
      var options = (type == 'row')?this.rel.property.table.rows:this.rel.property.table.cols
      for(var i=0;i<options.length;i++){
        if(i>0){
          this.optionValue += '\n'
        }
        this.optionValue += options[i].label
      }
      
      this.editType=type
      this.showMultiEditor=true
    }
  }
}
</script>

<style>
</style>
